<template>
	<view class="container">
		<scroll-view class="content" scroll-y="true" style="height: 100%;">
			<block v-for="(audio, index) in audios" :key="audio.id">
				<view class="audio-item">
					<view class="info">
						<view style="display: flex;align-items: center;">
							<image class="avatar" :src="audio.avatar"></image>
							<text class="name">{{ audio.name }}</text>
						</view>
						<text class="date">{{ audio.date }}</text>
					</view>
					<view class="desc">{{ audio.desc }}</view>
					<view class="control">
						<view style="display: flex;align-items: center;">
							<image class="cover" :src="audio.cover"></image>
							<view class="play-icon" @tap="playAudio(index)">
								<u-icon :name="audio.isPlaying ? 'pause' : 'play-right-fill'" color="#fff" size="10"></u-icon>
							</view>
						</view>
						<text class="duration">{{audio.duration}}</text>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				audios: [
					// 示例数据
					{
						id: 1,
						avatar: '../../../static/kbblnt.jpg',
						name: '张三',
						date: '2023-04-01',
						desc: '这是张三分享的音频描述',
						cover: '../../../static/ss.jpg',
						duration: '03:45',
						src: '../../../static/yzw.ogg',
						isPlaying: false // 添加一个状态来跟踪是否正在播放
					},
					{
						id: 2,
						avatar: '../../../static/kbblnt.jpg',
						name: '张三',
						date: '2023-04-01',
						desc: '这是张三分享的音频描述',
						cover: '../../../static/ss.jpg',
						duration: '03:45',
						src: '../../../static/qq.ogg',
						isPlaying: false // 添加一个状态来跟踪是否正在播放
					},
					{
						id: 3,
						avatar: '../../../static/kbblnt.jpg',
						name: '张三',
						date: '2023-04-01',
						desc: '这是张三分享的音频描述',
						cover: '../../../static/ss.jpg',
						duration: '03:45',
						src: 'static/yzw.ogg',
						isPlaying: false // 添加一个状态来跟踪是否正在播放
					},
				],
				currentAudioIndex: null, // 当前播放的音频索引
				audioContext: null, // 音频上下文
			};
		},
		onUnload() {
			if (this.audioContext) {
				this.audioContext.destroy(); // 页面卸载时销毁音频上下文
			}
		},
		methods: {
			playAudio(index) {
				// 如果音频上下文不存在，则创建一个新的音频上下文
				if (!this.audioContext) {
					this.audioContext = uni.createInnerAudioContext();
					this.audioContext.onEnded(() => {
						this.audios[this.currentAudioIndex].isPlaying = false; // 播放结束时更新状态
						this.currentAudioIndex = null; // 重置索引
					});
				}
				// 如果点击的是当前正在播放的音频，则暂停播放
				if (this.currentAudioIndex === index) {
					if (this.audioContext.paused) {
						this.audioContext.play(); // 如果已暂停，则继续播放
						this.audios[index].isPlaying = true; // 更新状态
					} else {
						this.audioContext.pause(); // 如果正在播放，则暂停
						this.audios[index].isPlaying = false; // 更新状态
					}
				} else {
					// 如果点击的是不同的音频，则设置新的音频源并播放
					this.audioContext.src = this.audios[index].src;
					this.audioContext.play();
					this.audios[index].isPlaying = true; // 更新状态
					if (this.currentAudioIndex !== null) {
						this.audios[this.currentAudioIndex].isPlaying = false; // 停止上一个音频的播放状态
					}
					this.currentAudioIndex = index; // 更新当前播放音频索引
				}
			},
		},
	}
</script>



<style>
	page {
		background-color: #f3f2f3
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 90%;
		margin: auto;

	}

	.content {
		flex: 1;

	}

	.audio-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;

	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 40rpx;
		margin-bottom: 10rpx;
		margin-right: 20rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5rpx;
	}

	.name {
		font-size: 18rpx;
		font-weight: bold;
	}

	.date {
		font-size: 14rpx;
		color: #666666;
	}

	.desc {
		font-size: 26rpx;
		color: #333333;
		margin: 15rpx 0;
	}

	.cover {
		width: 160rpx;
		height: 150rpx;
		border-radius: 15rpx 0rpx 0 15rpx;
		margin-right: 20rpx;
	}

	.control {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f3f2f3;
		border-radius: 15rpx;
	}

	.play-icon {
		width: 35rpx;
		height: 35rpx;
		background-color: #ffc299;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.duration {
		font-size: 14rpx;
		color: #666666;
		margin-right: 30rpx;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>